import { getElementError } from '@testing-library/react';
import React, { Component } from 'react';
import '../Allgoods/order.scss'

class order extends Component {
    constructor(props) {
        super(props);
        this.state = {
            order_list: ["综合", "销量", "新品", "价格", "筛选"],
            currentIndex: 0
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
        if (index == 0) {
            {/* 子组件向父组件传值 */ }
            {/* 父组件在子组件身上通过自定义属性传函数到子组件, 子组件内部通过props获取函数, 回调该函数并传值 */ }

        }

    }
    render() {
        return (
            <div className='order'>
                {
                    this.state.order_list.map((item, index) => {
                        return (
                            <span ref="clickItem"
                                key={index}
                                onClick={() => {
                                    this.handleClick(index)
                                }
                                }
                                style={{ color: (index == this.state.currentIndex) ? "red" : "" }}
                            >{item}</span>
                        )
                    })
                }
            </div >
        );
    }
}

export default order;